<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/4/29
  Time: 11:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/range.css" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        body {
            background-color: #C2D5FA;
            /*background-image: url("static/image/QQ图片20230426111251.png");*/
            /*background-repeat:no-repeat;*/
            /*background-size:cover;*/

        }

        .login-container {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            margin: 160px auto;
            max-width: 500px;
            padding: 40px;
        }

        h2 {
            color: #333;
            font-size: 28px;
            margin-bottom: 30px;
            text-align: center;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            color: #666;
            font-size: 18px;
            margin-bottom: 15px;
        }

        input[type="text"],
        input[type="password"] {
            background-color: #f5f5f5;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            padding: 10px;
            margin-bottom: 20px;
        }

        select{
            background-color: #F5F5F5;
            width: 150px;
            margin-top: 2px;
            margin-left: 135px;
        }

        button[type="submit"] {
            background-color: #333;
            border: none;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            font-size: 18px;
            padding: 13px;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #555;
        }


        /*头部*/
        /* css样式初始化 */
        * {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            border: none;
            text-decoration: none;
            text-transform: capitalize;
            transition: .2s linear;
        }
        html {
            font-size: 62.5%;

        }
        /* header样式初始化*/
        .header {
            /*position: fixed;*/
            /*top: 0;*/
            /*left: 0;*/
            /*right: 0;*/
            /*z-index: 1000;*/
            background: #3F3D56;
            display: flex;
            align-items: center;
            justify-content: space-between;
            opacity: 0.6;
        }
        /* 导航样式 */
        .navbar ul{
            display: flex;
        }
        .navbar ul li{
            font-weight: bold;
            width: 128px;
            height: 46px;
            list-style: none;
            text-align:center;
        }
        .navbar ul li a {
            width: 128px;
            line-height: 45px;
            font-size: 1.7rem;
            color: white;
        }
        .navbar ul li a:hover{
            color: #009933;
        }

        /*底部*/
        .footer{
            height: 75px;
            background-color: white;
            padding-top: 10px;
            opacity: 0.3;
        }
        .mod_service ul li{
            float: left;
            width: 400px;
            height: 20px;
            /*background-color: pink;*/
            padding-left: 45px;
        }
        .navbar ul li a{
            margin-left: -100px;
        }


    </style>
    <title>管理员登录</title>
    <meta charset="UTF-8">
</head>
<body >
<%--登录的界面--%>
<div class="login-container">
    <h2>手机号验证</h2>
    <form id="f1" action="login/userLogin" >
        <label for="phone">手机号:</label>
        <input type="text" id="phone" name="rolePhone" placeholder="请输入手机号" >

        <label for="phone">请输入新密码:</label>
        <input type="text" id="rolePassword" name="rolePassword" placeholder="请输入新密码" >

        <label for="phone">请确认新密码:</label>
        <input type="text" id="rolePassword1" name="rolePassword1" placeholder="请确认新密码" >

        <label for="verify">验证码:</label>
        <input type="text" id="verify" style="width: 200px;display: inline" name="verify" placeholder="请输入验证码" >
    </form>
    <button class="btn btn-default"onclick="sendVerify()" style="width: 100px;display: inline;float: right;position: relative;bottom: 80px">发送验证码</button>
    <button class="btn btn-default" style="margin-left: 150px" onclick="changPwd()">修改密码</button>
</div>
<footer class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5></h5>
                    <div class="service1">
                        <h4>联系电话：xxx-xxxxxxxx</h4>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service1">
                        <h4>邮箱：abcde@tsinghua.edu.cn </h4>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service1">
                        <h4>地址：xx市xx区xx大学 </h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</footer>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    function sendVerify(){
        let rolePhone = $("input[name='rolePhone']").val();
        // let rolePassword = $("input[name='rolePassword']").val();
        if(rolePhone==null||rolePhone==''){
            alert("请填写手机号")
            return false;
        }
        $.ajax( {
            "url"            :  "login/sendVerify",
            "type"         :  "get",
            "data"         :  {rolePhone:rolePhone},
            "dataType" :  "json",
            // contentType:"application/json;charset=utf-8",
            "success"  :  function(result) {
                alert(result.message);
            },
            "error"       :  function() {
                alert("出错了")
            }
        } );
    }

    function changPwd() {
        let rolePhone = $("input[name='rolePhone']").val();
        let rolePassword = $("input[name='rolePassword']").val();
        let rolePassword1 = $("input[name='rolePassword1']").val();
        let verify = $("input[name='verify']").val();
        if(rolePhone==null||rolePhone==''){
            alert("请填写手机号")
            return false;
        }
        if (rolePassword==null||rolePassword==''){
            alert("请先输入新密码")
            return false;
        }
        if (verify==null||verify==''){
            alert("请先输入验证码")
            return false;
        }
        if (rolePassword!=rolePassword1){
            alert("两次密码输入不一致")
            return false;
        }
        $.ajax( {
            "url"            :  "login/changPwd",
            "type"         :  "get",
            "data"         :  {rolePhone:rolePhone,verify:verify},
            "dataType" :  "json",
            // contentType:"application/json;charset=utf-8",
            "success"  :  function(result) {
                if (result.message=="222"){
                    alert("此手机号不存在")
                    return false;
                }
                if (result.message=="444"){
                    alert("请先发送验证码")
                    return false
                }
                if (result.message=="333"){
                    alert("验证码输入有误")
                    return false
                }
                if (result.message=="555"){
                    alert("请先发送验证码")
                    return false
                }
            },
            "error"       :  function() {
                alert("出错了")
            }
        } );
        $.ajax( {

            "url"            :  "login/queryPhoneAmendPwd",
            "type"         :  "post",
            "data"         :  {rolePhone:rolePhone,rolePassword:rolePassword},
            "dataType" :  "text",
            // contentType:"application/json;charset=utf-8",
            "success"  :  function(result) {
                console.log(result)
                layer.msg('修改成功');
            },
            "error"       :  function() {
                alert("出错了")
            }
        } );

    }
</script>
</body>


</html>
